<template>
<div style="margin-top: 56px">

  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl transform motion-safe:hover:scale-110 ">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="/img/logo.png" alt="Man looking at item at a store">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
        <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
      </div>
    </div>
  </div>
  <div v-for="item in 20" class="h-10 w-10 bg-red-500 odd:bg-gray-200  odd:rotate-45 ml-4 mt-4 hover:bg-red-600 flex justify-center items-center">
    <div class=" transition odd:rotate-300">
      福
    </div>
  </div>
</div>
</template>

<script lang="ts" setup></script>

<style></style>
